<template>
    <AppBreadCrumb>

    </AppBreadCrumb>
    <div class="box p-5">
        <div class="mb-5">
            <h3 class="font-bold text-xl mb-3">非凡编程</h3>
            <div class="flex items-center">
                <span>已开通：</span>
                <img class="w-4" src="../../assets/img/icon/icon-01.svg" alt="">
                <span>12个课程</span>
                <img src="../../assets/img/icon/icon-02.svg" alt="">
                <span>9位教师</span>
                <img src="../../assets/img/icon/icon-02.svg" alt="">
                <span>129名学生</span>
            </div>
        </div>

        <AppTabs v-model="curTab" :tabs="tabs">

        </AppTabs>
    </div>

</template>
<script setup>
import courseApi from "@/api/courseApi"

const tabs = ref([
    {
        id: "baseInfo",
        name: '基本信息',
        comp: defineAsyncComponent(() => import('./baseInfo.vue'))
    },
    {
        id: "courseInfo",
        name: '课程信息',
        comp: defineAsyncComponent(() => import('./courseInfo.vue'))

    },
    {
        id: "teacherInfo",
        name: '教师信息',
        comp: defineAsyncComponent(() => import('./teacherInfo.vue'))

    },
    {
        id: "studentInfo",
        name: '学员信息',
        comp: defineAsyncComponent(() => import('./studentInfo.vue'))
    },
    {
        id: "orderInfo",
        name: '订单信息',
        comp: defineAsyncComponent(() => import('./orderInfo.vue'))
    },
    {
        id: "contactInfo",
        name: '备忘录',
        comp: defineAsyncComponent(() => import('./contactInfo.vue'))
    }
])
const curTab = ref('baseInfo')

</script>

<style scoped>
.category-tab.tickets-tab-blk .nav-justified .nav-item {
    flex-basis: 120px;
}

.search-form {
    width: 400px;
}

.cur {

    background: #392C7D;
    color: #FFF;
}

table td {
    font-size: small;
}
</style>